<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="./vue.js"></script>
	
	<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <style>
        .box li{
            color: red;
            background: honeydew;
        }
        ul{
            clear: both;
        }
        li {
            float: left;
            width: 250px;
            background: beige;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="app">
       <ul style="list-style: none;" class="box">
           <li>id</li>
           <li>用户名</li>
           <li>密码</li>
       </ul>
    
           
            <ul v-for="item in group" style="list-style: none;" >
                <li>{{item._id}}</li>
                <li>{{item.username}}</li>
                <li>{{item.password}}</li>
            </ul>
 
        <!-- <button @click='num1'>我要更新数据</button> -->
        <button @click='btn'>获取数据</button>
    </div>
    

</body>


<script>

var app = new Vue({

el:'#app',
data:{
    group:[],
    // username:'',
},
methods:{
    btn(){
        axios({
            url:'http://localhost:3000/vuestudy',
            method:'get',
        }).then(res => {
            console.log(res);
            res.data.forEach(val => {
                this.group.push(val)
            })
        })
    }
}

})


</script>

</html>